<template>
  <view class="uni-container">
    <!-- <uni-forms ref="form" :model="formData" validate-trigger="submit" err-show-type="toast"> -->
    <uni-forms ref="form" v-if="ifThisUserHaveBeenLoggedIn" :model="formData" validate-trigger="submit" err-show-type="toast">
      <uni-forms-item name="category_id" label="分类" required>
        <uni-data-picker self-field="_id" parent-field="parent_id" v-model="formData.category_id"
          collection="opendb-mall-categories" field="name as text, _id as value"></uni-data-picker>
      </uni-forms-item>
      <uni-forms-item name="title" label="标题" required>
        <uni-easyinput placeholder="标题" v-model="formData.title" trim="both"></uni-easyinput>
      </uni-forms-item>
      <uni-forms-item name="content" label="菜谱内容" required>
        <!-- <uni-easyinput placeholder="菜谱内容" v-model="formData.content" trim="both"></uni-easyinput> -->
        <view class="editor-box">
          <sp-editor :toolbar-config="{
            excludeKeys: ['direction', 'date', 'lineHeight', 'letterSpacing', 'listCheck'],
            iconSize: '18px'
          }" @init="initEditor" @input="handlerForInputEvent" @upinImage="upinImage" @overMax="overMax" @addLink="addLink"
            @exportHtml="exportHtml"></sp-editor>
        </view>
      </uni-forms-item>
      <uni-forms-item name="avatarfile" label="封面大图" required>
        <uni-file-picker file-mediatype="image" return-type="object" v-model="formData.avatarfile"></uni-file-picker>
      </uni-forms-item>
      <view class="uni-button-group">
        <button type="primary" class="uni-button" @click="submit">提交</button>
      </view>
    </uni-forms>
    <view v-else class="login-wrapper">
      <view class="login-content" @click="handlerForGoToLoginPage">
      <!-- <view class="login-content"> -->
        <!-- 您还未登录，请先<button type="primary" size="mini">登录</button> -->
        <!-- 您还未登录，请先<button type="primary" size="mini" @click="handlerForGoToLoginPage">登录</button> -->
        <!-- 您还未登录，请先<button type="primary" size="mini" @click="handlerForGoToLoginPage" open-type="navigate">登录</button> -->
      </view>
    </view>
  </view>
</template>

<script>
import { validator } from '../../js_sdk/validator/food-list.js';
import dayjs from "dayjs";
import {store} from '@/uni_modules/uni-id-pages/common/store.js'; // 导入全局仓库对象，这个对象中存储了登录状态等信息
const db = uniCloud.database();
const dbCollectionName = 'food-list';

function getValidator(fields) {
  let result = {}
  for (let key in validator) {
    if (fields.indexOf(key) > -1) {
      result[key] = validator[key]
    }
  }
  return result
}



export default {
  data() {
    let formData = {
      "category_id": "",
      "title": "",
      "content": "",
      "avatarfile": null
    }
    return {
      formData,
      formOptions: {},
      rules: {
        ...getValidator(Object.keys(formData))
      },
      editorIns: null,
    }
  },
  onReady() {
    this.$refs.form.setRules(this.rules)
  },
  computed: {
    ifThisUserHaveBeenLoggedIn() {
      // return store.hasLogin() // 判断用户是否已经登录（全局仓库对象中已预先定义了该方法）
      return store.hasLogin // 注：教学视频中老师写的原版代码是上边的写法，但经我实地验证发现，现在仓库中已经把“hasLogin”方法更换为同名的属性（布尔值），可以直接使用，使用上面的这一行代码时微信开发者工具的控制台中会报错，提示“hasLogin is not a function”      
    }
  },
  methods: {

    /**
     * 验证表单并提交
     */
    submit() {
      uni.showLoading({
        mask: true
      })
      this.$refs.form.validate().then((res) => {
        return this.submitForm(res)
      }).catch(() => {
      }).finally(() => {
        uni.hideLoading()
      })
    },

    /**
     * 提交表单
     */
    submitForm(value) {
      // 使用 clientDB 提交数据
      return db.collection(dbCollectionName).add(value).then((res) => {
        uni.showToast({
          icon: 'none',
          title: '新增成功'
        })
        this.getOpenerEventChannel().emit('refreshData')
        // setTimeout(() => uni.navigateBack(), 500)
        setTimeout(() => { // 延迟500ms，等待数据写入数据库完成后再返回列表页面（而不是返回到用户之前浏览的页面）
          uni.reLaunch({
          url: './list',
          events: {
            // 监听新增数据成功后, 刷新当前页面数据
            refreshData: () => {
              this.$refs.udb.loadData({
                clear: true
              })
            }
          }
        })
        }, 500)
      }).catch((err) => {
        uni.showModal({
          content: err.message || '请求服务失败',
          showCancel: false
        })
      })
    },
    /**
     * 函数“handlerForGoToLoginPage”被用于“跳转到登录页面”，该方法在当前页面中被调用时会触发跳转到登录页面的动作
     */
    handlerForGoToLoginPage(){
      console.log('函数“handlerForGoToLoginPage”被调用，即将跳转到登录页面');      
      uni.navigateTo({
        url: '/uni_modules/uni-id-pages/pages/login/login-withpwd',
      })
    },
    // 以下内容是富文本编辑器“sp-editor”提供的一些方法↓
    /**
     * 获取输入内容
     * @param {Object} event “event”是组件触发的事件对象，此处可直接获取到编辑器的内容。这个对象中的“html”和“text”属性的值分别是输入内容的html文本和text文本
     */
    handlerForInputEvent(event) {
      // 可以在此处获取到编辑器中已编辑的内容
      /* console.log(event); // {html: '<p>123</p>', text: '123\n'}
      console.log(event.text);
      console.log(event.html); // 编辑器内容html文本 */
      this.formData.content = event.html
    },
    /**
     * 超出最大内容限制
     * @param {Object} e {html,text} 内容的html文本，和text文本
     */
    overMax(e) {
      // 若设置了最大字数限制，可在此处触发超出限制的回调
      console.log('==== overMax :', e)
    },
    /**
     * 编辑器就绪
     * @param {Object} editor 编辑器实例，你可以自定义调用editor实例的方法
     * @tutorial editor组件 https://uniapp.dcloud.net.cn/component/editor.html#editor-%E7%BB%84%E4%BB%B6
     * @tutorial 相关api https://uniapp.dcloud.net.cn/api/media/editor-context.html
     */
    initEditor(editor) {
      this.editorIns = editor // 保存编辑器实例
      // 保存编辑器实例后，可以在此处获取后端数据，并赋值给编辑器初始化内容
      this.preRender()
    },
    preRender() {
      setTimeout(() => {
        // 异步获取后端数据后，初始化编辑器内容
        /* this.editorIns.setContents({
          html: `<div>&nbsp;&nbsp;猫猫<img src="https://img.yzcdn.cn/vant/cat.jpeg"/></div>`
        }) */
      }, 1000)
    },
    /**
     * 直接运行示例工程插入图片无法正常显示的看这里
     * 因为插件默认采用云端存储图片的方式
     * 以$emit('upinImage', tempFiles, this.editorCtx)的方式回调
     * @param {Object} tempFiles
     * @param {Object} editorCtx
     */
    upinImage(tempFiles, editorCtx) {
      /**
       * 本地临时插入图片预览
       * 注意：这里仅是示例本地图片预览，因为需要将图片先上传到云端，再将图片插入到编辑器中
       * 正式开发时，还请将此处注释，并解开下面 使用 uniCloud.uploadFile 上传图片的示例方法 的注释
       * @tutorial https://uniapp.dcloud.net.cn/api/media/editor-context.html#editorcontext-insertimage
       */
      // #ifdef MP-WEIXIN
      // 注意微信小程序的图片路径是在tempFilePath字段中
      /* editorCtx.insertImage({
        src: tempFiles[0].tempFilePath,
        width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
        success: function () {}
      }) */
      // #endif

      // #ifndef MP-WEIXIN
      /* editorCtx.insertImage({
        src: tempFiles[0].path,
        width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
        success: function () {}
      }) */
      // #endif

      /**
       * 使用 uniCloud.uploadFile 上传图片的示例方法（可适用多选上传）
       * 正式开发环境中，请将上面 本地临时插入图片预览 注释后，模仿以下写法
       */
      tempFiles.forEach(async (item) => { // 注：此处有循环，说明支持多选图片上传
        uni.showLoading({
          title: '上传中请稍后',
          mask: true
        })
        let upfile = await uniCloud.uploadFile({
          filePath: item.path,
          // 同名会导致报错 policy_does_not_allow_file_overwrite
          // cloudPath可由 想要存储的文件夹/文件名 拼接，若不拼文件夹名则默认存储在cloudstorage文件夹中
          // cloudPath: `cloudstorage/${item.name}`,
          cloudPath: `${dayjs(new Date()).format('YYYYMMDD')}/${Date.now() + item.name}`,
          cloudPathAsRealPath: true
        })
        editorCtx.insertImage({
          src: upfile.fileID,
          width: '80%', // 默认不建议铺满宽度100%，预留一点空隙以便用户编辑
          success: function () {
            uni.hideLoading()
          }
        })
      })
    },
    /**
     * 导出 - toolbar需要开启export工具
     * @param {string} e 导出的html内容
     */
    exportHtml(e) {
      uni.navigateTo({
        url: '/pages/out/out',
        success(res) {
          // 传至导出页面解析即可
          res.eventChannel.emit('e-transmit-html', {
            data: e
          })
        }
      })
    },
    /**
     * 添加超链接
     * @param {Object} e { text: '链接描述', href: '链接地址' }
     */
    addLink(e) {
      console.log('==== addLink :', e)
    }
  }
}
</script>

<style>
.uni-container {
  padding: 15px;
}

.uni-input-border,
.uni-textarea-border {
  width: 100%;
  font-size: 14px;
  color: #666;
  border: 1px #e5e5e5 solid;
  border-radius: 5px;
  box-sizing: border-box;
}

.uni-input-border {
  padding: 0 10px;
  height: 35px;

}

.uni-textarea-border {
  padding: 10px;
  height: 80px;
}

.uni-button-group {
  margin-top: 50px;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  justify-content: center;
}

.uni-button {
  width: 184px;

}.editor-box {
  height: 600rpx;
}
.login-wrapper{
  display: flex;
  justify-content: center;
}
.login-content{
  display: flex;
  justify-content: center;
}
</style>
